<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>商品列表</caption>
    <tr>
        <th>商品名</th>
        <th>价格</th>
        <th>库存</th>
    </tr>
</table>
<script>
    //定义一个空的Person
   function Person(){}
    let p1 = new Person();
   p1.name = "刘德华";
   p1.age = 18;
   p1.run = function (){
       console.log(this.name+":"+this.age);
   }
   p1.run();
   //定义一个自带属性和方法的对象
    function Car(){
        this.name = "拖拉机";
        this.price = 10;
        this.run = function (){
            console.log(this.name + ":" + this.price);
        }
    }
    let car = new Car();
    car.run();
    //直接实例化空对象的方式
   let p2 = {}
    p2.name = "勒布朗詹姆斯"
    p2.age = 19;
   p2.run =function (){
       console.log(this.name+this.age);
   }
   p2.run();
   //直接实例化带属性和方法的对象
    let p3 = {
        name : "卢布",age:18,run:function (){
         console.log(this.name+":"+this.age);
        }
    }
    p3.run();
    //将商品信息封装到一个对象中，在数组里面装多个表示商品信息的对象
    let arr = [{title:"小米",price:5000,num:500},
        {title:"大米",price:5000,num:500},
        {title:"黑米",price:5000,num:500}];
    let table = document.querySelector("table")
    for (let item of arr) {
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let numTd = document.createElement("td");
          //给 td添加显示的内容
         titleTd.innerText = item.title;
         priceTd.innerText = item.price;
         numTd.innerText = item.num;
         tr.append(titleTd,priceTd,numTd);
         table.append(tr);

    }
</script>
</body>
</html>